<template>
  <view class="body">
    <view class="ditu" :style="{height:height+'px'}">
      <map style="width:100%;height:100%;"
           :latitude="latitude"
           :longitude="longitude"
           :scale="scale"
           :markers="marker"
          >
        <!--此处踩坑问题1：
        @markertap 是点击地图上的标记点时 触发打开地图。
        @tap 是点击地图整体的时候 触发打开地图。
        -->
      </map>
    </view>
    <bottom-box>
      <view class="address">地址：{{ address }}</view>
      <view class="photoTitle">照片信息</view>
      <view class="photoBox flex a-item j-content" style="width: 100%">
        <photo-image v-show="imageUrl" :image-url="imageUrl" @del="removeImage"/>
        <photo v-show="!imageUrl" @change="setPhoto" />
        
      </view>
      <input v-if="remark" v-model="form.remark" placeholder="请输入备注" class="remk"/>
      <view>
        <button class="signIn" @click="signIn">确认签到</button>
      </view>
    </bottom-box>
  </view>
</template>

<script>
import {curTime, getScreen, getToken, saveImage} from "../../service/auth";
import bottomBox from "../components/bottomBox";
import {signIn,signIn1} from "../../service/api/delivery";
import photo from "../components/photo";
import photoImage from "../components/photoImage";

export default {
  components:{bottomBox, photo, photoImage},
  data() {
    return {
      latitude: '', //纬度
      longitude: '', //经度
      height: 0,
      addressL:'',
      imageUrl:'',
      remark:'',
      form:{
        doorwayPhotoUrl:'',
        location:'',
        shootTime: '',
        signInTime:'',
        customerId:'',
        remark:''
      },
      customer:{},
      marker: [{
        id: 0,
        latitude: '', //纬度
        longitude: '', //经度
        // title: '山东某某有限公司', //标注点名
        alpha: 1, //透明度
        width:20,
        height:30,
        // iconPath:'https://www.zjjqf.cn/file/static/location.png'
      }],
      scale: 14, //地图缩放程度
      address: ''
    }
  },
  onLoad(option){
    this.remark=option.remark
  },
  onShow(){
    const app = getApp()
    this.customer = app.globalData.customer
    this.form.customerId = this.customer.id
  },
  created() {
    const that = this
    uni.getLocation({
      type: 'wgs84',
        isHighAccuracy:true,
      geocode:true,
      altitude: true,
      success: function (res) {
        that.latitude = res.latitude
        that.longitude = res.longitude
        that.marker[0].latitude = res.latitude
        that.marker[0].longitude = res.longitude
        that.form.location = `${res.longitude},${res.latitude}`
        wx.request({
          url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=QQXBZ-BUKYS-YEMOS-6DLDL-WMCTO-5ZFNX`,
          success(val) {
            that.address = val.data.result.address
          }
        })
      },
      fail: function () {
        uni.showToast({
          title: '获取地址失败，将导致部分功能不可用',
          icon:'none'
        });
      }})
    const { height } = getScreen()
    this.height = height
  },

  methods: {

    setPhoto(e){
      this.imageUrl = e;
      this.form.shootTime = curTime()
    },
    save(){
      
      const rk=this.remark?signIn1:signIn
      console.log(this.remark,'签到',rk);
      rk(this.form).then(res=>{
        uni.hideLoading()
        if (res.status === 200){
          uni.showToast({title:'签到成功',icon:'success'})
          this.customer.visited = 1
          uni.navigateBack()
        }else {
          uni.showToast({title:res.msg,icon:'error'})
        }
      }).catch(err=>{
        uni.hideLoading()
        uni.showToast({title:err.msg,icon:'error'})
      })
    },
    removeImage(){
      this.imageUrl = ''
    },
    signIn() {
      if (!this.imageUrl) return uni.showToast({title:'请先上传门店照片',icon:'none'});
      const _this = this
      uni.showLoading({
        title: '签到中'
      });
      saveImage(this.imageUrl).then(res=>{
        _this.form.signInTime = curTime()
        _this.form.doorwayPhotoUrl = res
        _this.save()
      })

    }
    }
}
</script >
<style lang="scss" scoped>
.ditu {
  width: 100%;
}
.image{
  width: 200rpx;
  height: 200rpx;
}
.signIn{
  width: 90%;
  background: #00A4FE;
  border-radius: 90rpx;
  margin: 10rpx 5%;
  height: 70rpx;
  font-size: 30rpx;
  color: #FDFEFF;
}
.imageBox{
  position: relative;
  .closeImage{
    background: rgba(203,203,203,0.8);
    width: 35rpx;
    height: 35rpx;
    font-size: 30rpx;
    border-radius: 35rpx;
    position: absolute;
    right: -20rpx;
    top: -20rpx;
    color: #ffffff;
  }
}
.photoBox{
  margin: 50rpx 0;
}
.photoTitle{
  font-size: 32rpx;
  font-weight: 600;
  padding-left: 25rpx;
}
.address{
  font-size: 32rpx;
  font-weight: 400;
  color: #666666;
  padding: 25rpx;
}
.remk{
  border: 1px #c3c1c1 solid;
    padding: 0 10px;
    width: 50%;
    margin: auto;
}
</style>
